<%--
  Created by IntelliJ IDEA.
  User: shen
  Date: 2020/2/11
  Time: 11:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <base href="${basePath}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>二级知识点</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <%@include file="../common_resource.jsp" %>
    <style type="text/css">
        .main_body{
            /*position: relative;
            top:190px;*/
            font-size: 14px;
        }
        .listDiv{
            font-size: 13px;
        }
    </style>
    <script type="text/javascript">
        /*判断是否成功插入二级知识点*/
        <c:if test="${not empty sessionScope.insertSecKdl}">
        $(function(){
            $("#insertSuccessModal").modal();
        });
        </c:if>
        <c:if test="${0 eq sessionScope.insertSecKdl}">
        $(function(){
            $("#insertFailModal").modal();
        });
        </c:if>

/* 一级知识点下拉列表*/
        $.getJSON('Kld/selectAllLev/0', function (res) {
            var levKldID = $('#levKldID');

            $.each(res, function (index,item) {
                console.log('%i - %o', index, item);
                levKldID.append('<option value="' + item.levKldID +'">' + item.levKldCtgr + '</option>');
            })
        });
/*去做更新操作*/
        function doUpdate(id){
            var o=document.getElementById("update"+id);
            o.style.display = "block";

            var title=document.getElementById("name"+id);
            title.style.display = "none";
        }

/*实际确认进行更新*/
        function SecUpdate(id){
            var value=$("#newvalue"+id).val();
            $.post("Kld/updateSecKld",{"secKldID":id,"secKldCtgr":$("#newvalue"+id).val()},function(date){
                if(date.updateSec==1){
                    $("#successModal").modal();
                    var o=document.getElementById("update"+id);
                    var title=document.getElementById("name"+id);

                    title.style.display = "block";
                    o.style.display = "none";
                    $("#name"+id).html(value);
                }else{
                    $("#failModal").modal();
                }
            });
        }
/*取消操作*/
        function doCanncel(id){
            var o=document.getElementById("update"+id);
            var title=document.getElementById("name"+id);

            title.style.display = "block";
            o.style.display = "none";
        }
/*通过一级ID查找二级知识点*/
        function findBylevKldID(){
            var FormData = $("#searchForm").serialize();
            var levKldID=$("#levKldID").val();
            if(levKldID!==null){
                location.href="Kld/selectAllSecByLevIDRequest/0?levKldID="+levKldID;
            }else{
                location.href="Kld/selectAllSecByLevIDRequest/0";
            }

        }
 /*做删除操作*/
        function doDelete(secKldID){
            $("#delSureModal").modal();
            $("#sureBtn").click(function(){
                $("#sureBtn").attr("data-dismiss","modal");
                $.get("Kld/deleteSecKld",{"secKldID":secKldID},function(json){
                    if(json.delSecCtgr==1){
                        $("#row"+secKldID).remove();
                        $("#delSuccessModal").modal();
                    }else{
                        $("#delFailModal").modal();
                    }
                });
            });

        }

    </script>
    <style type="text/css">
        .msg{
            color: red;
            font-style: italic;
            font-weight: normal;
        }
        .listData_btn{
            font-size: 11px;
            margin:0px;
        }
    </style>
</head>
<body class="main_body">
<div class="container container-1180" >
    <div class="col" style="margin-top: 10px;">
        <div class="panel panel-info">
            <div class="panel-heading">
                <span ><i class="fa fa-user"></i></span> <label><font style="font-weight: bold;margin-left: 10px;font-size: 17px">新&nbsp;增&nbsp;二&nbsp;级&nbsp;知&nbsp;识&nbsp;点</font></label>
            </div>
            <center>
                <fieldset style="width: 1120px;margin-top: 10px;border-color:#BCE8F1;">
                    <form id="searchForm" action="Kld/insertSecKld" method="post">
                        <div style="width: 480px;margin-left:130px;">
                            <div style="margin-left:100px;">
                                <div class="error invalid_error" style="padding-top:15px;margin-left:-100px;">
                                    <label for="levKldID" class="col-sm-3 control-label" style="font-size: 13px;">一级知识点： </label>
                                </div>
                                <div style="float:left; margin-right: 5px;">
                                    <select id="levKldID" name="levKldID" class="easyui-validatebox form-control"  required="true" size="7" style="width:290px;">
                                    </select>
                                    <br/><br/>
                                </div>
                            </div>

                            <table style="margin-left:0px;" width="583px;" cellpadding="0" cellspacing="0" border="0px">
                                <tr style="margin-left: -20px">
                                    <th align="left">
                                        <label for="levKldID" class="col-sm-3 control-label" style="font-size: 13px;">二级知识点： </label>
                                        <input name="secKldCtgr" value="<%=request.getParameter("secKldCtgr")==null ? "" : request.getParameter("secKldCtgr")%>" placeholder="请输入知识点" class="easyui-validatebox form-control "  required="true" style="width: 200px"/>
                                        <div id="addOptMsg" class="msg"></div>
                                        <br>
                                    </th>
                                </tr>
                                <tr style="height: 50px;">
                                    <td align="left">
		   		  <span style="margin-left:70px;">
		   			<input type="submit" value="保存" class="btn btn-primary"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		   			<input type="button" value="查询" class="btn btn-info" onclick="findBylevKldID();"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		   			<input type="reset" value="重置" class="btn btn-warning"/>
		   		  </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </form>
                </fieldset>
            </center>
            <div class="panel panel-warning" style="margin-top: -40px;margin: 10px">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-th-list"></span>&nbsp;二级知识点信息</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-hover" style="margin-left:190px; font-size: 18px;width: 680px; text-align: center;">
                        <tr style="height: 25px; font-weight: bold;" class="success">
                            <th align="center" width="60px" style="text-align: center;">序号</th>
                            <th align="center" style="text-align: center;">知识点</th>
                            <th align="center" width="160px" style="text-align: center;">操作</th>
                        </tr>

                        <c:forEach var="secKld" items="${secKldList}" varStatus="status" >

                            <tr id="row${secKld.secKldID}">
                                <td align="center">${status.count}</td>
                                <td>
                                    <span id="name${secKld.secKldID }" style="display: block;">${secKld.secKldCtgr}</span>
                                    <div id="update${secKld.secKldID }" style="display: none">
						   			<span  class="col-sm-9">
						   				<input type="text" id="newvalue${secKld.secKldID }" value="${secKld.secKldCtgr}" size="33" class="form-control"/>
						   			</span>
                                        <span class="col-sm-3">
						   				<input type="button" value="确认" onclick="SecUpdate(${secKld.secKldID})" class="btn btn-info btn-xs"/>
						   				<input type="button" value="取消" onclick="doCanncel(${secKld.secKldID})" class="btn btn-warning btn-xs"/>
						   			</span>
                                    </div>
                                </td>
                                <td align="center">
                                    <a class="btn btn-info btn-sm" id="button${secKld.secKldID}" onclick="doUpdate(${secKld.secKldID});"><i class="fa fa-edit fa-white"></i>
                                        编辑
                                    </a>
                                    <a class="btn btn-danger btn-sm" id="button${secKld.secKldID}" onclick="doDelete(${secKld.secKldID});"><i class="glyphicon glyphicon-trash"></i>
                                        删除
                                    </a>
                                </td>
                            </tr>
                        </c:forEach>

                    </table>
                    <div class="pager" style="padding-left:50px;background-color: #FAEBD7">
                        <%--分页显示--%>
                        总${secKldList.getTotal()}条 &nbsp;&nbsp; 第${secKldList.getPageNum()}页/共${secKldList.getPages()}页
                        &nbsp;&nbsp; &nbsp;&nbsp;
                        <c:if test="${secKldList.getPageNum() gt 1}">
                            <a href="Kld/selectAllSecByLevIDRequest/1">第一页</a> &nbsp;
                        </c:if>
                        <c:if test="${secKldList.getPageNum() gt 1}">
                            <a href="Kld/selectAllSecByLevIDRequest/${secKldList.getPageNum()-1}">上一页</a>&nbsp;
                        </c:if>
                        <c:if test="${secKldList.getPageNum() lt secKldList.getPages()}">
                            <a href="Kld/selectAllSecByLevIDRequest/${secKldList.getPageNum()+1}">下一页</a>&nbsp;
                        </c:if>
                        <c:if test="${secKldList.getPageNum() lt secKldList.getPages()}">
                            <a href="Kld/selectAllSecByLevIDRequest/${secKldList.getPages()}">末页</a>&nbsp;
                        </c:if>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Mainly scripts -->
<script src="bootstrap/js/bootstrap.min.js"></script>

<div class="modal fade" id="insertSuccessModal" tabindex="-1" role="dialog"
     aria-labelledby="insertSuccessModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h2 class="modal-title" id="myModal1">
                    <i class="fa fa-twitch"></i> &nbsp;&nbsp;提示
                </h2>
            </div>
            <div class="modal-body" style="text-align:center;">
                <h3>二级知识点添加成功</h3>
            </div>
            <div class="modal-footer">
                <button id="closeModal" type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 添加失败模态 -->
<div class="modal fade" id="insertFailModal" tabindex="-1" role="dialog"
     aria-labelledby="insertFailModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h2 class="modal-title" id="myModal2">
                    <i class="fa fa-twitch"></i> &nbsp;&nbsp;提示
                </h2>
            </div>
            <div class="modal-body" style="text-align:center;">
                <h3>添加失败</h3>
            </div>
            <div class="modal-footer">
                <button  type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 更新成功模态 -->
<div class="modal fade" id="successModal" tabindex="-1" role="dialog"
     aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h2 class="modal-title" id="myModal3">
                    <i class="fa fa-twitch"></i> &nbsp;&nbsp;提示
                </h2>
            </div>
            <div class="modal-body" style="text-align:center;">
                <h3>更新一级知识点成功</h3>
            </div>
            <div class="modal-footer">
                <button id="closeSuccessModal" type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 更新失败modal -->
<div class="modal fade" id="failModal" tabindex="-1" role="dialog"
     aria-labelledby="feildModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h2 class="modal-title" id="myModal4">
                    <i class="fa fa-twitch"></i> &nbsp;&nbsp;更新提示
                </h2>
            </div>
            <div class="modal-body" style="text-align:center;">
                更新一级知识点失败
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 删除警告模态 -->

<div class="modal fade" id="dangerModal" tabindex="-1" role="dialog"
     aria-labelledby="selectDengerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModal5">
                    <span style="font-size: 40px;"><i class="fa fa-exclamation-circle"></i>警告!</span>
                </h4>
            </div>
            <div class="modal-body" style="text-align:center;">
                <h3 style="color:red;">请至少选择一项!</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger"
                        data-dismiss="modal">确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 删除确认模态 -->
<div class="modal fade" id="delSureModal" tabindex="-1" role="dialog"
     aria-labelledby="delOKModalModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h2 class="modal-title" id="myModal6">
                    <i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;删除警告！</span>
                </h2>
            </div>
            <div class="modal-body" style="text-align:center;">
                <h3 style="color: red;">删除后就不可恢复</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-denger"
                        data-dismiss="modal">关闭
                </button>
                <button id="sureBtn" type="button" class="btn btn-primary" >确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 删除成功模态 -->

<div class="modal fade" id="delSuccessModal" tabindex="-1" role="dialog"
     aria-labelledby="delSuccessModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h2 class="modal-title" id="myModal7">
                    <i class="fa fa-twitch"></i> &nbsp;&nbsp;删除成功提示
                </h2>
            </div>
            <div class="modal-body" style="text-align:center;">
                <h3 class="text-success">删除 成功</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 删除失败modal -->
<div class="modal fade" id="delFailModal" tabindex="-1" role="dialog"
     aria-labelledby="delFeildModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h2 class="modal-title" id="myModalLabel">
                    <i class="fa fa-twitch"></i> &nbsp;&nbsp;删除失败提示
                </h2>
            </div>
            <div class="modal-body" style="text-align:center;">
                <h3 style="color: red;">该知识点正在被使用，不能删除</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
</html>
<c:remove var="insertSecKdl" scope="session"/>
